<template>
	<view>

		<tm-sticky :offset="offset">
			<template v-slot:sticky>
				<tm-sheet color="white" :margin="[-25,-20,0,-50]" transprent="true">
					<tm-sheet>
						<tm-tabs @change="tabschange" showTabsLineAni :list="tabsTitle" :width="700" default-name="1"
							tabPos="top" transprent="true">
						</tm-tabs>
					</tm-sheet>
				</tm-sheet>
			</template>
			<tm-sheet :height="5000">

				<tm-row :width="600" :column="12" v-for="(item, index) in list" :key="index"
					style="border: solid 1rpx #c0c0c0; border-radius: 15rpx; margin-bottom: 10rpx;"
					@click="getNotice(item.id)">

					<tm-col :borderGutter="[0, 0, 0, 0]" _class="flex flex-row flex-row-center-center" :col="8"
						:height="180">
						<tm-row :column="1" transprent="true" @click="getNotice(item.id)">
							<tm-text v-if="item.type==5">【上新】{{item.title}}</tm-text>
							<tm-text v-if="item.type==6">【合成】{{item.title}}</tm-text>
							<tm-text v-if="item.type==7">【空投】{{item.title}}</tm-text>
							<tm-text v-if="item.type==8">【活动】{{item.title}}</tm-text>
							<tm-row :column="0.5">
								<tm-col :col="0.25" style="margin-top: 20px; margin-left: -10px;"
									@click="getNotice(item.id)">
									<tm-tag size="xxs" v-if="item.type==5" color="#bdbdbd"> 上新公告</tm-tag>
									<tm-tag size="xxs" v-if="item.type==6" color="#bdbdbd"> 合成公告</tm-tag>
									<tm-tag size="xxs" v-if="item.type==7" color="#bdbdbd"> 空投公告</tm-tag>
									<tm-tag size="xxs" v-if="item.type==8" color="#bdbdbd"> 活动公告</tm-tag>

								</tm-col>

								<tm-col :col="0.25" style="margin-top: 20px; margin-left: 10px;"
									@click="getNotice(item.id)">

									<tm-text color="#424242" fontSize="20">{{item.issueTime}}</tm-text>
								</tm-col>

							</tm-row>

						</tm-row>
					</tm-col>
					<tm-col :col="3" :height="180" style="margin-top: 10px; margin-left:10px;">
						<view class="flex-1 " @click="getNotice(item.id)">
							<tm-image :width="170" :height="120" style="margin-top: 7px;"
								src="https://store.tmui.design/api_v2/public/random_picture" :round="2"></tm-image>
						</view>
					</tm-col>

				</tm-row>


			</tm-sheet>

		</tm-sticky>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsTitle: [

					{
						key: '4',
						title: '全部'
					}

				],
				list: [],
				submitDate: {
					pageNo: 1,
					pageSize: 5,
					total: 0,
				},
				id: ''
			}
		},
		onLoad() {
			this.titleInfo();
			this.query();
		},
		methods: {
			//站内公告信息
			query() {
				uni.request({
					url: '/app/cm/' + this.submitDate.pageNo + '/' + this.submitDate
						.pageSize + '/listNotice.do', // API接口地址
					method: 'POST', // 请求方法，可选值：'OPTIONS', 'GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'TRACE', 'CONNECT'
					data: { // 发送到服务器的数据，如果设置为对象则会自动转换为JSON字符串格式

						keyword: '',
						status: '1'
					},
					success: (res) => {

						let requ = res.data.data.records;

						for (let i = 0; i < requ.length; i++) {
							this.list.push(requ[i]);
						}
						this.submitDate.total = res.data.data.total;
						console.log(this.list);
						// 在请求成功时返回的数据
					},
				})
			},
			//标题栏
			titleInfo() {
				uni.request({
					url: '/nft/NOTICE/showDict.do',
					method: 'POST',
					header: { // 设置请求的header
						'content-type': 'application/json', // 指定请求头，比如设置Content-Type
					},
					success: (res) => {
						let requ = res.data.data;

						for (let i = 0; i < requ.length; i++) {
							let tabsDate = requ[i];
							this.tabsTitle.push({
								key: tabsDate.id,
								title: tabsDate.dictLabel
							})



						}

						// 在请求成功时返回的数据
					},
				})

			},
			//查看站内公告信息
			getNotice(id) {

				uni.navigateTo({
					url: '/pages/notice/getNoticePage?id=' + id
				});

			}



		},
		//瀑布流
		onReachBottom() {

			if (this.submitDate.total <= this.list.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
			} else {
				this.submitDate.pageNum++;
				this.query();
			}
		},


	}
</script>

<style>

</style>